import React, {useState} from "react";
import {Button, Input, List, Toast} from "zarm";
import { post } from '@/utils';

import Header from "@/components/Header/index.jsx";
import s from './style.module.less';
const Account = () => {
    const [oldPass, setOldPass] = useState('');
    const [newPass, setNewPass] = useState('');
    const [RequireNewPass, setRequireNewPass] = useState('');

    const submit = async () => {
        if(!oldPass || !newPass || !RequireNewPass){
            Toast.show('密码不能为空')
            return
        }
        if (newPass === RequireNewPass) {
            await post('/api/user/modify_pass', {
                old_pass: oldPass,
                new_pass: newPass,
                new_pass2: RequireNewPass,
            })
            Toast.show('修改成功')
        } else {
            Toast.show('新密码与确认密码不一致！')
        }
    }

    return <>
        <Header title={'重置密码'}/>
        <div className={s.account}>
            <div className={s.form}>
                <List>
                    <List.Item title={'原密码'}>
                        <Input
                            clearable
                            type={'text'}
                            placeholder={'请输入原密码'}
                            onChange={(e) => setOldPass(e.target.value)}
                        />
                    </List.Item>
                    <List.Item title={'新密码'}>
                        <Input
                            clearable
                            type={'text'}
                            placeholder={'请输入新密码'}
                            onChange={(e) => setNewPass(e.target.value)}
                        />
                    </List.Item>
                    <List.Item title={'确认密码'}>
                        <Input
                            clearable
                            type={'text'}
                            placeholder={'请再次输入新密码'}
                            onChange={(e) => setRequireNewPass(e.target.value)}
                        />
                    </List.Item>
                </List>
            </div>
            <Button className={s.btn} block theme='primary' onClick={submit}>提交</Button>
        </div>
    </>
}

// eslint-disable-next-line react-refresh/only-export-components
export default Account